<template>
  <view class="container">
    <u-picker :show="show" ref="uPicker" :columns="columns" :title="title" @cancel="show = false"
              @confirm="confirm"></u-picker>
    <u-datetime-picker :minDate="newData" :show="dateTimeShow" mode="datetime" :title="title"
                       @cancel="dateTimeShow = false" @confirm="checkDateTime"></u-datetime-picker>
    <u-toast ref="uToast"></u-toast>
    <u-popup :show="showPop" @close="showPop =false" :round="10">
      <view class="user-box">
        <u-checkbox-group
            class="checkbox-box"
            v-model="checked"
            placement="column"
            iconPlacement="right"
        >
          <u-checkbox
              class="checkbox-item"
              v-for="(item, index) in userList"
              :key="index"
              :name="item.name + '|' + item.id"
              :label="item.name"
          ></u-checkbox>
        </u-checkbox-group>
        <view class="multiple-btn-box">
          <u-button class="multiple-btn" @click="closeUserPop">关闭</u-button>
          <u-button class="multiple-btn" type="primary" @click="checkedConfirm"
          >确定</u-button
          >
        </view>
      </view>
    </u-popup>
    <view>
      <u--form labelPosition="left" :model="from" :rules="rules" ref="form1" labelWidth='120px'
               :labelStyle='labelStyle'>
        <view class="title">
          基础信息
        </view>
        <view class="box" style="padding-bottom: 10px">
          <u-form-item label="作业票名称" prop="zypmc" borderBottom>
            <u--input v-model="from.zypmc" placeholder="输入作业票名称" border="none"></u--input>
          </u-form-item>
          <u-form-item label="作业申请单位" prop="zysqdw" borderBottom @click="itemClick('zysqdw','作业申请单位')">
            <u--input v-model="from.zysqdw" placeholder="选择作业申请单位" border="none" disabled
                      disabledColor="#ffffff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="作业申请时间" prop="applyDate" borderBottom
                       @click="dateTimeShow =true,dateTimeType=1,title='作业申请时间'">
            <u--input v-model="from.applyDate" placeholder="选择作业申请时间" border="none" disabled
                      disabledColor="#ffffff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="作业实施时间" prop="workImplementDate" borderBottom
                       @click="dateTimeShow =true,dateTimeType=2,title='作业实施时间'">
            <u--input v-model="from.workImplementDate" placeholder="选择作业实施时间" border="none" disabled
                      disabledColor="#ffffff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <user-pick :label="'监护人'" :multiple="false" :placeholder="'请选择监护人'" v-model="from.jhr"
                     :prop="'jhr'"></user-pick>

<!--          <u-form-item label="作业地点" prop="zydd" borderBottom>-->
<!--            <u&#45;&#45;input v-model="from.zydd" placeholder="选择作业地点" border="none"></u&#45;&#45;input>-->
<!--          </u-form-item>-->
          <u-form-item label="作业单位" prop="zydw" borderBottom @click="itemClick('zydw','作业单位')">
            <u--input v-model="from.zydw" placeholder="选择作业单位" border="none" disabled
                      disabledColor="#ffffff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <user-pick :label="'作业负责人'" :title="'作业负责人'" :multiple="false" :placeholder="'请选择作业负责人'"
                     v-model="from.zyfzr" :prop="'zyfzr'"></user-pick>
          					<u-form-item label="涉及单位" prop="sjdw1" borderBottom @click="clickShowPopup">
          						<u--input v-model="from.sjdw1" placeholder="请选择涉及单位" border="none" disabled disabledColor="#ffffff"></u--input>
                      <u-icon slot="right" name="arrow-right"></u-icon>
          					</u-form-item>
          <view style="color: #838383;padding: 10px 0">断路原因</view>
          <u--textarea v-model="from.dlyy" placeholder="请输入..." height="120" confirmType="next"
                       style="margin-bottom: 15px;background: #f6f6f6" count :maxlength="500"></u--textarea>
        </view>

        <view class="title">
          作业简图
        </view>
        <view class="box" style="padding-bottom: 10px">
          <u-form-item label="断路作业示意图" prop="text" borderBottom>
            <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                      :maxCount="4"></u-upload>
          </u-form-item>
          <view style="color: #838383;padding: 10px 0">相关说明</view>
          <u--textarea v-model="from.xgsm" placeholder="请输入..." height="120"
                       confirmType="next" style="padding-bottom: 15px;background: #f6f6f6" count :maxlength="500">
          </u--textarea>
          <!--					<u-form-item label="作业范围" prop="xgsm" borderBottom>-->
          <!--						<u&#45;&#45;input v-model="from.xgsm" placeholder="输入作业范围" border="none"></u&#45;&#45;input>-->
          <!--					</u-form-item>-->
          <!--					<u-form-item label="作业方式" prop="zyfs" borderBottom>-->
          <!--						<u&#45;&#45;input v-model="from.zyfs" placeholder="输入作业方式" border="none"></u&#45;&#45;input>-->
          <!--					</u-form-item>-->
          <!--					<u-form-item label="作业深度" prop="zysd" borderBottom>-->
          <!--						<u&#45;&#45;input v-model="from.zysd" placeholder="输入作业方式" border="none"></u&#45;&#45;input>-->
          <!--					</u-form-item>-->
          <!--					<u-form-item label="作业面积" prop="zymj">-->
          <!--						<u&#45;&#45;input v-model="from.zymj" placeholder="输入作业面积" border="none"></u&#45;&#45;input>-->
          <!--					</u-form-item>-->
        </view>
        <view class="title">
          关联特殊作业
        </view>
        <view class="box">
          <u-form-item label="关联特殊作业" prop="gltszy" @click="itemClick('gltszy','关联特殊作业')">
            <u--input v-model="from.gltszy" placeholder="选择关联特殊作业" border="none" disabled
                      disabledColor="#ffffff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </view>


        <view class="title">
          危害辨识-安全措施
        </view>
        <view class="box" style="padding-bottom: 6px">
          <u-form-item label="危害辨识" prop="text" borderBottom @click="toHazardousFactors">
            <u--input v-model="from.text" placeholder="选择危害因素" border="none" disabled
                      disabledColor="#ffffff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <view
              style="background:#f6f6f6;margin-bottom: 30px;border-radius:8px;height: 200px;overflow-y: auto">
            <u-checkbox-group v-model="from.  harm" placement="column" :labelSize='32'>
              <u-checkbox activeColor="#53c21d" v-for="(item,index) in from.  harm" :label="item.label"
                          :name="item.value" shape="circle" :key="index" style="padding: 10px 20px" :checked=true>
              </u-checkbox>
            </u-checkbox-group>
          </view>
          <u-form-item label="安全措施" prop="text" borderBottom @click="toSafetyMeasures">
            <u--input v-model="from.text" placeholder="选择安全措施" border="none" disabled
                      disabledColor="#ffffff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <view
              style="background:#f6f6f6;margin-bottom: 30px;border-radius:8px;height: 200px;overflow-y: auto">
            <u-checkbox-group v-model="from.safetyMeasures" placement="column" :labelSize='32'>
              <u-checkbox activeColor="#53c21d" v-for="(item,index) in from.safetyMeasures"
                          :label="item.label" :name="item.value" shape="circle" :key="index"
                          style="padding: 10px 20px" :checked=true>
              </u-checkbox>
            </u-checkbox-group>
          </view>
          <u-form-item label="个人用品防护" prop="text" borderBottom @click="toProtection">
            <u--input v-model="from.text" placeholder="选择个人用品防护" border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <view
              style="background:#f6f6f6;margin-bottom: 30px;border-radius:8px;height: 200px;overflow-y: auto">
            <u-checkbox-group v-model="from.personalProtection" placement="column" :labelSize='32'>
              <u-checkbox activeColor="#53c21d" v-for="(item,index) in from.personalProtection"
                          :label="item.label" :name="item.value" shape="circle" :key="index"
                          style="padding: 10px 20px" :checked=true>
              </u-checkbox>
            </u-checkbox-group>
          </view>
        </view>
        <view class="title">
          安全交底
        </view>
        <view class="box">
          <user-pick :label="'安全交底人'" :multiple="false" :title="'安全交底人'" :placeholder="'请选择安全交底人'"
                     v-model="from.aqjdr" :prop="'aqjdr'"></user-pick>
          <user-pick :label="'接受交底人'" :multiple="false" :title="'接受交底人'" :placeholder="'请选择接受交底人'"
                     v-model="from.jsjdr" :prop="'jsjdr'"></user-pick>
        </view>
        <!--				<view class="title">-->
        <!--					安全教育-->
        <!--				</view>-->
        <!--				<view class="box">-->
        <!--					<u-form-item label="实施安全教育人" prop="text" borderBottom>-->
        <!--						<u&#45;&#45;input v-model="from.text" placeholder="选择实施安全教育人" border="none"></u&#45;&#45;input>-->
        <!--						<u-icon slot="right" name="arrow-right"></u-icon>-->
        <!--					</u-form-item>-->
        <!--					<u-form-item label="是否已实施" prop="text" borderBottom>-->
        <!--						<u&#45;&#45;input v-model="from.text" placeholder="选择是否已实施" border="none"></u&#45;&#45;input>-->
        <!--						<u-icon slot="right" name="arrow-right"></u-icon>-->
        <!--					</u-form-item>-->
        <!--				</view>-->
        <view class="title">
          审核人/审核部门
        </view>
        <view class="box">
          <user-pick :label="'作业负责人意见'" :multiple="false" :title="'作业负责人意见'" :placeholder="'请选择作业负责人'"
                     v-model="from.jsjdr" :prop="'jsjdr'"></user-pick>
          <user-pick :label="'所在单位'" :multiple="false" :title="'所在单位审批人'" :placeholder="'请选择所在单位审批人'"
                     v-model="from.spr" :prop="'spr'"></user-pick>
<!--          <user-pick :label="'供水部门意见'" :multiple="false" :title="'供水部门审核人'" :placeholder="'选择供水部门审核人'"-->
<!--                     v-model="from.gsbmspr" :prop="'gsbmspr'"></user-pick>-->
<!--          <user-pick :label="'配电部门意见'" :multiple="false" :title="'配电部门审核人'" :placeholder="'选择配电部门审核人'"-->
<!--                     v-model="from.pdbmshr" :prop="'pdbmshr'"></user-pick>-->
<!--          <user-pick :label="'供气部门意见'" :multiple="false" :title="'供气部门审核人'" :placeholder="'选择供气部门审核人'"-->
<!--                     v-model="from.gqbmshr" :prop="'gqbmshr'"></user-pick>-->
<!--          <user-pick :label="'工艺部门意见'" :multiple="false" :title="'工艺部门审核人'" :placeholder="'选择工艺部门审核人'"-->
<!--                     v-model="from.gybmshr" :prop="'gybmshr'"></user-pick>-->
<!--          <user-pick :label="'设备部门意见'" :multiple="false" :title="'设备部门审核人'" :placeholder="'选择设备部门审核人'"-->
<!--                     v-model="from.sbbmshr" :prop="'sbbmshr'"></user-pick>-->
          <user-pick :label="'消防部门意见'" :multiple="false" :title="'消防部门审核人'" :placeholder="'选择消防部门审核人'"
                     v-model="from.xfbmshr" :prop="'xfbmshr'"></user-pick>
          <user-pick :label="'安全部门意见'" :multiple="false" :title="'安全部门审核人'" :placeholder="'选择安全部门审核人'"
                     v-model="from.aqbmshr" :prop="'aqbmshr'"></user-pick>
          <user-pick :label="'审批部门意见'" :multiple="false" :title="'安全部门审核人'" :placeholder="'选择安全部门审核人'"
                     v-model="from.spbmyj" :prop="'spbmyj'"></user-pick>
        </view>
        <view class="title">
          验收
        </view>
        <view class="box">
          <user-pick :label="'验收人'" :multiple="false" :title="'验收人'" :placeholder="'选择验收人'" v-model="from.ysr"
                     :prop="'ysr'"></user-pick>
        </view>
      </u--form>
      <u-button type="primary" text="申请" @click="submit" class='but'></u-button>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import userPick from "@/pages/Components/userPick";
import {
  getDepartmentAPI,
  turnOffAssociateAPI,
  openCircuitWorkAPI,
  workUnitApproverAPI,
} from "@/api/api.js"
import {
  URL
} from '../../../api/request.js'
export default {
  components: {
    userPick,
  },
  onShow() {
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1];
    let brand = currPage.brand
    if (!!brand) {
      if (brand.option) {
        this.from.harm = brand.option
        this.from.whbs = brand.optionList.toString()
      } else if (brand.list) {
        this.from.safetyMeasures = brand.list
        this.from.aqcs = brand.idList.toString()
      } else if (brand.fh) {
        this.from.personalProtection = brand.fh
        this.from.grypfh = brand.fhlist.toString()
      }
    }
  },
  data() {
    return {
      userList:[],
      checked:[],
      fileList1: [],
      show: false,
      dateTimeShow: false,
      title: '',
      temKey: '',
      showPop:false,
      dateTimeType: 0,
      columns: [],
      newData: new Date().getTime(),
      labelStyle: {
        color: '#666'
      },
      from: {
        harm: [],
        safetyMeasures: [],
        personalProtection: [],
        whbs: '',
        aqcs: '',
        grypfh: '',
        text: '',
        zypmc: '',
        applyDate: '',
        zysqsj: '',
        workImplementDate: '',
        zysssj: '',
        dlyy: '',
        zydw: '',
        sjxgdw:'',
        sjdw:[],
        sjdw1:'',
        urlList: [],
        fj: '',
        xgsm: ''
      },
      rules: {},
      obj: {}
    };
  },
  methods: {
    checkedConfirm(){
      console.log(this.checked);
      this.from.sjdw = this.checked
          .map((item) => item.split("|"))
          .map((item) => item[1])
          .join(",");
      this.from.sjdw1 = this.checked
          .map((item) => item.split("|"))
          .map((item) => item[0])
          .join(",");
      console.log(this.from.sjdw);
      this.showPop = false
    },
    clickShowPopup(){
      workUnitApproverAPI({}).then((r) => {
        this.userList= r.data.bm
      })
      this.showPop =true
    },
    closeUserPop() {
      this.checked = [];
      this.showPop = false;
    },
    submit() {
      this.from.fj = this.from.urlList.toString()
      console.log(this.from)
      openCircuitWorkAPI({}).then((r) => {
        if (r.code === 200) {
          this.$refs.uToast.show({
            type: 'success',
            message: "作业票申请成功",
            iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
          })
          setTimeout((e)=>{
            uni.navigateBack({
              delta: 1
            })
          },2000)
        }
      })
    },
    itemClick(key, title) {
      if (key === 'zysqdw' || key === 'zydw' || key === 'szdw') {
        this.show = true
        this.title = title
        this.temKey = key
        getDepartmentAPI({}).then((r) => {
          let msg = r.data.map((e) => {
            return e.deptName
          })
          this.columns = [msg]
        })
      } else if (key === 'gltszy') {
        this.show = true
        this.title = title
        this.temKey = key
        turnOffAssociateAPI({}).then((r) => {
          let msg = r.data.map((e) => {
            return e.zypmc;
          });
          this.columns = [msg];
        });
      } else {
        this.show = true
        this.title = title
        this.temKey = key
        this.columns = this.obj[key]
      }
    },
    checkDateTime(e) {
      const timeFormat = uni.$u.timeFormat
      switch (this.dateTimeType) {
        case 1:
          this.from.applyDate = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
          this.from.zysqsj = timeFormat(e.value, 'yyyymmddhhMM')
          break;
        case 2:
          this.from.workImplementDate = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
          this.from.zysssj = timeFormat(e.value, 'yyyymmddhhMM')
          break;
        case 3:
          this.from.analysisDate = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
          this.from.fxsj = timeFormat(e.value, 'yyyymmddhhMM')
          break;
      }
      this.dateTimeShow = false
    },
    confirm(e) {
      this.from[this.temKey] = e.value[0]
      // this.from[this.temKey]==='待实施'?this.from.sfyss='0':this.from.sfyss='1'
      this.show = false
    },
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    //新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '上传成功',
          url: result
        }))
        fileListLen++
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: URL + '/common/upload',
          filePath: url,
          name: 'file',
          header: {
            'Authorization': `Bearer ${uni.getStorageSync('token')}`
          },
          formData: {
            user: 'file'
          },
          success: (res) => {
            this.from.urlList.push(JSON.parse(res.data).url.toString())
            setTimeout(() => {
              resolve(res.data.data)
            }, 1000)
          }
        });
      })
    },
    toProtection() {
      uni.navigateTo({
        url: '../HotWork/protection/protection'
      })
    },
    toHazardousFactors() {
      uni.navigateTo({
        url: '../HotWork/hazardousFactors/hazardousFactors'
      })
    },
    toSafetyMeasures() {
      uni.navigateTo({
        url: '../HotWork/safetyMeasures/safetyMeasures'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 24rpx;
  background-color: #f6f6f6;

  .title {
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 44rpx;
    padding: 20rpx 48rpx;
  }

  .box {
    padding: 0rpx 48rpx;
    background-color: #fff;
    border-radius: 20rpx;
  }
}

.but {
  margin: 30rpx 0;
}
.user-box {
  height: 30vh;
  background: #fff;
  position: relative;
  overflow-y: scroll;
}
.multiple-btn-box {
  position: absolute;
  width: 90%;
  margin: 0 auto;
  bottom: 10px;
  left: 5%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.multiple-btn {
  width: 45%;
}
.checkbox-box {
  position: absolute;
  top: 0;
  width: 100%;
  height: 20vh;
  overflow-y: scroll;
}
.checkbox-item {
  width: 90%;
  margin-left: 5%;
  font-size: 1.4rem;
  padding: 14px 0;
  border-bottom: 1px solid #e5e5e5;
}
</style>
